<template>
<div>
  <!-- 面包屑导航 -->
  <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>音乐管理</el-breadcrumb-item>
    <el-breadcrumb-item>MV管理</el-breadcrumb-item>
    <el-breadcrumb-item>歌曲列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 条件查询   -->
  <el-form :inline="true" :model="query" size="mini" >
    <el-form-item label="MV名称:">
      <el-input v-model.trim="query.mvName"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
      <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
    </el-form-item>
  </el-form>
  <el-row :gutter="20">
    <el-col :span="4" v-for="(item, index) in list" :key="index" >
      <el-card :body-style="{ padding: '10px' }" shadow="hover">
        <div slot="header" class="clearfix">
          <span style="color: #5daf34;display: block;width: 120px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.mvName}}</span>
          <el-button style="float: right; padding: 3px 5px" type="text" @click="handleEdit(item.mvId)">编辑</el-button>
          <el-button style="float: right; padding: 3px 5px" type="text" @click="handleDel(item.mvId)">删除</el-button>
        </div>
        <img :src="item.mvImg" class="image" @click="playVideo(item)" style="cursor:pointer">
        <div style="padding: 14px;">
          <el-tag v-if="item.status === 1" type="info">已发布</el-tag>
          <el-tag v-if="item.status === 0" type="info">未发布</el-tag>
          <el-tag type="info" style="margin-left: 5px;">内地</el-tag>
          <el-tag type="info" style="margin-left: 5px;">官方版</el-tag>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <!-- 分页 -->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="query.current"
      :page-size="query.size"
      background
      layout="total, prev, pager, next"
      :total="query.total">
    </el-pagination>
  </div>

  <!-- 播放MV -->
  <el-dialog :title="video.title" :visible.sync="video.visiable" width="800px" height="480" :before-close="handleClose">
    <video ref="video" id="video" controls width="770" height="480" :autoplay="false">
      <source type="video/mp4">
    </video>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" type="primary">关闭</el-button>
    </span>
  </el-dialog>

  <!-- 添加MV -->
  <add :visiable="add.visiable" :remoteClose="remoteClose" />

  <!--  编辑MV -->
  <edit :id="edit.id" :visiable="edit.visiable" :remoteClose="remoteClose" />
</div>
</template>

<script>
import musicApi from '@/api/music';
import Add from './add';
import Edit from './edit';
export default {
  components: {
    Add, Edit
  },

  data() {
    return {
      list: [], // MV列表
      currentDate: new Date(),
      query: {
        mvName: '',
        current: 1,   // 当前页码
        size: 6,     // 每页大小
        total: 0
      },
      video: {
        playMvImg: '',
        visiable: false,
        title: ''
      },
      add: {
        visiable: false
      },
      edit: {
        id: '',
        visiable: false,
      }
    }
  },

  created() {
    this.fetchData();
  },

  methods: {
    // 编辑
    handleEdit(id) {
      this.edit.id = id;
      this.edit.visiable = true;
    },

    // 获取所有的MV
    fetchData() {
      musicApi.getAllMv(this.query).then(response => {
        if (response.code === 200) {
          this.list = response.data.list;
          this.query.total = response.data.total;
        }
      })
    },

    // 条件查询
    queryData() {
      this.fetchData();
    },

    // 添加
    handleAdd() {
      this.add.visiable = true;
    },

    // 播放视频
    playVideo(item) {
      this.video.visiable = true;
      // this.video.playMvImg = item.mvImg;
      this.video.title = item.mvName;
      this.$refs.video.src = item.addr;
    },

    // val 是切换之后的每页显示多少条
    handleSizeChange(val) {
      this.query.size = val;
      this.fetchData();
    },

    // 当页码改变后触发此方法 val是当前点击（或输入）的页码
    handleCurrentChange(val) {
      this.query.current = val;
      this.fetchData();
    },

    // 删除MV
    handleDel(id) {
      this.$confirm('确认删除这条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        musicApi.deleteMvById(id).then(response => {
          if (response.code === 200) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 1500
            });
          } else if (response.code === 306) {
            this.$notify.error({
              title: '错误',
              message: '您没有操作权限，请联系管理员',
              duration: 1500
            });
          } else {
            this.$notify.error({
              title: '错误',
              message: '系统异常，请稍后再试',
              duration: 1500
            });
          }
          // 刷新列表
          this.fetchData();
        })
      }).catch(() => {
        // 取消删除
      });
    },

    // 关闭弹框
    handleClose() {
      // 关闭弹出框时 视频关闭播放
      const video = document.getElementById('video')
      video.pause();
      this.video.visiable = false;
      this.video.playMvImg = '';
      this.video.playMvAddr = '';
    },

    // 重置
    reload() {
      this.query.mvName = '';
      this.fetchData();
    },

    // 关闭窗口
    remoteClose() {
      this.add.visiable = false;
      this.edit.visiable = false;
      this.edit.id = '';
      this.fetchData();
    },
  },
}
</script>

<style scoped>

.el-card {
  margin-bottom: 30px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 200px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

/*.mvName_span {*/
/*  color: #5daf34;*/
/*  max-width: 10em;*/
/*  overflow: hidden;*/
/*  white-space: nowrap;*/
/*  text-overflow: ellipsis;*/
/*}*/

.clearfix:after {
  clear: both
}
</style>
